<template>
  <div class="container">
    <div class="footer">
      <div class="footer-top">
        <div class="footer-top-item">
          <i class="iconfont">&#xe629;</i>
          <p>全场满 ¥99 顺丰包邮</p>
          <p>（顺丰无法配送的区域将使用 EMS）</p>
        </div>
        <div class="footer-top-item">
          <i class="iconfont">&#xe698;</i>
          <p>支持支付宝、微信、银联、银行转账</p>
          <p>支持花呗、京东白条和招行分期</p>
        </div>
        <div class="footer-top-item">
          <i class="iconfont">&#xe7e5;</i>
          <p>联系我们：<a href=""> 在线支持</a></p>
        </div>
      </div>
      <div class="footer-list">
        <dl>
          <dt>商城热卖</dt>
          <dd><a href=""> “御” Mavic</a></dd>
          <dd><a href=""> “晓” Spark</a></dd>
          <dd><a href=""> 精灵 Phanto</a></dd>
          <dd><a href=""> 灵眸 Osmo</a></dd>
          <dd><a href=""> “悟” Inspir</a></dd>
          <dd><a href=""> 如影 Ronin</a></dd>
        </dl>

        <dl>
          <dt>购买指南</dt>
          <dd><a href=""> 支付方式 </a></dd>
          <dd><a href=""> 订单帮助 </a></dd>
          <dd><a href=""> 发货和物流 </a></dd>
          <dd><a href=""> 退换货条款 </a></dd>
          <dd><a href=""> 技术支持 </a></dd>
          <dd><a href=""> 售后服务政策 </a></dd>
          <dd><a href=""> DJI 币返利计划 </a></dd>
        </dl>

        <dl>
          <dt>商城项目</dt>
          <dd><a href=""> 以旧换新</a></dd>
          <dd><a href="">DJI 大疆商城 App</a></dd>
        </dl>

        <dl>
          <dt>社区</dt>
          <dd><a href=""> 天空之城</a></dd>
          <dd><a href=""> DJI 大疆社区</a></dd>
          <dd><a href=""> 购机指南</a></dd>
        </dl>
        <dl>
          <dt>订阅</dt>
          <dd>
            <a href="">第一时间了解我们的促销活动、热销产品和最新信息。</a>
            <p>
              <input type="text" placeholder="请输入您的邮箱" /><button>
                <i class="iconfont">&#xe61a; </i>
              </button>
            </p>
          </dd>
        </dl>
      </div>
      <div class="footer-bottom">
        Copyright © 2021 DJI 大疆创新
        版权所有隐私权政策使用条款粤ICP备12022215号-11营业执照网站地图
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
// 引入iconfontcss
@import "../../assets/styles/iconfont.css";
.container {
  background-color: #fff;
}
.footer {
  margin: 100px auto 0px;
  width: 1200px;
  .footer-top {
    padding: 50px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    .footer-top-item {
      color: rgb(108, 112, 115);
      text-align: center;
      .iconfont {
        font-size: 30px;
        line-height: 40px;
      }
      p {
        font-size: 6px;
        line-height: 20px;
      }
    }
  }
  .footer-list {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 20px;
    border-bottom: 1px solid #eee;
    dl {
      line-height: 24px;
      flex: 1;
      dt {
        margin-bottom: 8px;
      }
      dd {
        a {
          color: #6c7073;
        }
      }
    }
    input {
      box-sizing: border-box;
      width: 150px;
      height: 30px;
      padding: 5px;
      border: 1px solid #eee;
    }
    button {
      width: 30px;
      height: 30px;
      background-color: rgb(92, 92, 92);
    }
    .iconfont {
      font-size: 12px;
      color: white;
    }
  }
  .footer-bottom{
    padding: 10px 40px 40px ;
    color: rgb(92, 92, 92);
  }

}
</style>